<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners"
               :visible.sync="showDialog"
               @open="onOpen" @close="onClose" title="添加用户">
      <div align="left">
        <p class="m-text2">
          <a class="m-text3">基本信息</a>
          <a class="m-text4"><i class="question circle icon"></i>默认密码(000000)</a>
        </p>
      </div>
      <el-row>
        <el-form ref="elForm" :model="user" :rules="rules" size="medium" label-width="85px">
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="user.userName" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="登录名" prop="loginName">
              <el-input v-model="user.loginName" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
<!--            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" placeholder="请输入密码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>-->
            <el-form-item label="手机号" prop="phoneNo">
              <el-input v-model="user.phoneNo" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
<!--            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="formData.departmentId" placeholder="请选择部门" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in departmentIdOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>-->
<!--            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item prop="password"><label slot="label">密&nbsp;码:</label>
              <el-input type="password" v-model="user.password" placeholder="" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
<!--            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="formData.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>-->

            <el-form-item label="身份证" prop="idNo">
              <el-input v-model="user.idNo" placeholder="" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>


import {updateUser} from "@/api/users";

export default {
  name: 'UserUpdate',
  inheritAttrs: false,
  components: {},
  //接收父类的传值
  props: {
    updateVisible: {
      type: Boolean,
      default: false
    },
    updateUser: {}
  },

  data() {
    return {
      // 控制弹出框显示隐藏
      showDialog:false,

      oldUser: {},

      user: {
        userName: '',
        password: '',
        loginName: '',
        phoneNo: '',
        idNo: '',
      },

      rules: {
        userName: [{required: true, message: '请输入用户名', trigger: 'blur'},
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        loginName: [{required: true, message: '请输入登录名', trigger: 'blur'},
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        phoneNo: [{required: true, message: '请输入手机号', trigger: 'blur'},
          { min: 8, max: 12, message: '长度在 8 到 16 个数字', trigger: 'blur' }
        ],
        idNo: [{required: true, message: '请输入身份证', trigger: 'blur'},
          { min: 18, max: 18, message: '长度是 18 个字符', trigger: 'blur' }
        ],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
      }
    }
  },

  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    updateVisible () {
      this.showDialog = this.updateVisible
    },
  },
  //调用钩子函数
  created() {},
  mounted() {},
  methods: {
    onOpen() {
      this.user = this.updateUser
      this.oldUser = JSON.parse(JSON.stringify(this.user))
    },

    //右上 × 符号
    onClose () {
      //清空当地弹窗数据
      this.user = {}
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
    },


    //取消按钮
    close () {
      //会执行onClose()
      this.$emit('update:visible', false)
      this.$emit('changeShow', 'false')
    },

    //确认
    handelConfirm () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          return
        }
        //会执行onClose()
        //判断信息是否改变
        if (this.oldUser.loginName !== this.user.loginName
            || this.oldUser.userName !== this.user.userName
            || this.oldUser.password !== this.user.password
            || this.oldUser.phoneNo !== this.user.phoneNo
            || this.oldUser.idNo !== this.user.idNo) {
          this.updataUser()
        } else {
          this.$message.error('信息未改变，没有修改')
        }
      })
    },

    //添加用户
    updataUser () {
      updateUser(this.user).then(res => {
        if (res) {
          this.$notify.success({
            title: '操作成功',
            message: '信息修改',
          })

          //关闭,重新调用父类中的方法
          try {
            this.$emit('reFresh')
          } catch (e) {
          }
          this.onClose()
        }
      })
    }
  }
}

</script>
<style>
.m-text4 {
  font-weight: 100 !important;
  letter-spacing: 1px !important;
  line-height: 1.8;
  color: #A2AABB;
}

.m-text3 {
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  line-height: 1.8;
  color: #2D2F33;
  margin-right: 5px;
}

.m-text2 {
  padding-bottom: 1.5em !important;
  font-size: 1.15em !important;
  font-weight: 100 !important;
  letter-spacing: 1px !important;
  line-height: 1.8;
  color: #000000;
}

</style>